1. 가시속성

• html태그는 저마다 보이지 않는 특성을 가지고 있는데 이것을 'display'속성(성격)이라고 함

• display 종류 : block, inline, inline-block, table, cell, none, flex, grid ...

블럭요소

• 크기를 주지 않아도 오른쪽 끝까지 영역을 차지하고 있기 때문에 다음에 들어가는 내용이 자동으로 줄바꿈됨
• 내가 원하는 사이즈를 설정할 수 있음

• div, nav, header, main, footer, ul, li, ol, dl, dt, dd, p ,hr, h1~h6, fieldset, figure, table 등

인라인요소

• 인라인 요소는 줄이 바뀌지 않고, 옆으로 나란히 배치됨
• 사이즈를 따로 지정할 수 없고, margin/padding값을 줘야함

• 인라인 요소를 가운데로 배치하기 위해서는
1. text-align: center;
2. 요소의 성격을 바꾸어줌 display: block or inline-block;

• s, ins, span, i, b, mark, sub, sup, small, strong, em, a 등

인라인블럭요소

• input, img(크기값을 가질 수 있음, 문자처럼 줄변경을 해야 줄이 변경됨)

2. 박스모델(box-model) 계산하기

• 블럭요소가 가질 수 있는 크기 값을 계산하는 방법을 '박스모델'이라고 하며
• width, height, margin, padding, border 속성 값을 설정할 수 있음

• width, height : 크기를 지정할 때 사용하며 단위는 px, %단위를 주로 사용

• border : 테두리를 지정하고자 할 때 ㅏㅅ용하며 선택한 요소의 상/하/좌/우에 선을 줄 수 있음

• margin : 선택한 요소를 기준으로 바깥쪽으로 여백을 설정하고자 할 때 사용하며,상/하/좌/우 순으로 값을 줄 수 있으며, 모두 같은 값을 주거나, 좌/우, 상/하 따로 설정이 가능함

• padding : 선택한 요소를 기준으로 안쪽 여백을 설정하고자 할 때 사용하며 작성법은 margin값 설정과 같음

• 박스크기 계산하기 = width or height + padding + margin + border

• box-sizing : css3에서 추가된 속성으로 원래 크기의 박스요소에서 패딩, 테두리 값을 포함하여 크기를 계산하는 속성
단, 마진값은 포함하지 않음

• box-sizing: border-box; 박스크기에 테두리, 패딩값을 포함

• box-sizing: content-box; 박스크기가 콘텐츠양에 따라 커짐(기본)값